<template>
    <div class="men">
     <img src="http://cdn13.mei.com/category/20180930/57dfece118107294128fb90e060e9745d4fa53a986efd91b.jpg" alt="" class="ban">
     <ul>
         <li v-for="data1 in classlist" :key="data1.categoryTwoId">
             <img :src="data1.categoryImgStr" alt="">
         </li>
     </ul>
      <div
        class="pros"
        >
        <Pros :pro="list"></Pros>
      </div>
      <FooterPublic></FooterPublic>
    </div>
</template>
<script>
import { instance } from '@/utils/http'
import Vue from 'vue'
import Pros from '@/components/Pros'
import FooterPublic from '@/components/FooterPublic'
export default {
  data () {
    return {
      list: [],
      classlist: []
    }
  },
  components: {
    Pros,
    FooterPublic
  },
  created () {
    instance.get('/appapi/silo/eventForH5?categoryId=kids&pageIndex=1&timestamp=1586540985175&summary=59835eb0d953c283aa6221f5be74fbde&platform_code=H5')
      .then(res => {
        this.list = res.data.eventList
      }),
    instance.get('appapi/cms/cmsDetail/v3?silo=2013000100000000005&ids=2120000100000000146&timestamp=1586540985305&summary=4af2b277afb986a02eb6f23a3f8dcc78&platform_code=H5')
      .then(res => {
        this.classlist = res.data.resultList[0].data
      })
  }

}
</script>
<style lang="scss" scoped>
.ban{
    width: 100%;
    height: 4.5rem;
    display: block;
}
.crossborder {
  .pros {
    padding: .2rem .16rem;
    h4 {
      margin-bottom: .2rem;
      font-size: .2rem;
      color: black;
    }
  }
}
ul{
    display: flex;
    height: 100px;
    justify-content: space-between;
    padding: 5px 10px;
    li{
       margin-left: 4px;
        img{
            width: 100%;
        }
    }
}
</style>
